<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<link rel="stylesheet" media="screen" type="text/css"
	href="styles/1CssMaster.css" />

<link rel="stylesheet" media="screen" type="text/css"
	href="styles/tableau.css" />

<link rel="stylesheet" media="screen" type="text/css"
	href="styles/personnel.css" />

<link rel="stylesheet" href="styles/jquery-ui-1.10.2.custom.css" />
<script src="jsMairie/jquery-1.9.1.js"></script>
<script src="jsMairie/jquery-ui-1.10.2.custom.js"></script>
<script src="jsMairie/DataPicker.js"></script>



<title>personnel</title>

</head>

<body>
	<div id="headerDroite">
		<h:form>
			<h:panelGrid columns="2">
				<h:outputText style="center:left" value="#{mbConnexion.leLogin}" />
				<h:commandButton value="Déconnexion"
					action="#{mbConnexion.deconnexion}" />
				<h:outputText style="center:left" />
				<h:outputText style="center:left" />
			</h:panelGrid>
		</h:form>
	</div>
	<div id="divTitre">
		<h1 id="nomLogiciel">Gepeto</h1>
		<img alt="" src="../../mairie/imagesGepeto/plumeSansFond.png"
			width="80px" height="80px" />

	</div>


	<div id="divMenuHaut">

		<ul id="ulMenuHaut">

			<li class="liMenuHaut"><a href="ficheEnfant.xhtml">Dossier
					Enfant</a></li>
			<li class="liMenuHaut"><a href="inscription.xhtml">Inscription</a></li>
			<li class="liMenuHaut"><a href="pointage.xhtml">Pointage</a></li>
			<li class="liMenuHaut"><a href="facturation.xhtml">Facturation</a></li>
			<li class="liMenuHaut"><a href="editions.xhtml">Editions</a></li>
			<li class="liMenuHaut"><a href="personnel.xhtml">Personnel</a></li>
		</ul>
	</div>
	

	<div id="divSousMenuGauche">

		<ul id="ulSousMenuGauche">
			<li class="liSousMenuGauche"><a href="personnel.xhtml">Recherche
					multicritères</a></li>
			<li class="liSousMenuGauche"><a href="personnelParNom.xhtml">Recherche
					par Nom</a></li>
			<li class="liSousMenuGauche"><a href="personnel.xhtml">Gestion
					planning</a></li>

		</ul>
	</div>

	<div id="centre">
<h:form>
		<div id="divRecherche">
			<fieldset id="fieldSetRecherche">
				<legend>
					<b>Critères</b>
				</legend>
				
					<h:panelGrid columns="4">
						<h:selectOneMenu id="selectDate"
							value="#{beanJoursEncadrement.idJoursEncadrement}">
							<f:selectItem itemLabel="-- Séléctionner un jour --"
								itemValue="0"></f:selectItem>
							<f:selectItems
								value="#{beanJoursEncadrement.listeJoursEncadrement}" />
						</h:selectOneMenu>

						<h:selectOneMenu id="selectEcole"
							value="#{beanJoursEncadrement.idEcole}">
							<f:selectItem itemLabel="-- Séléctionner une ecole --"
								itemValue="0"></f:selectItem>
							<f:selectItems value="#{beanJoursEncadrement.listeEcole}" />
						</h:selectOneMenu>

						<h:selectOneMenu id="selectFonction"
							value="#{beanJoursEncadrement.idFonction}">
							<f:selectItem itemLabel="-- Séléctionner une fonction --"
								itemValue="0"></f:selectItem>
							<f:selectItems value="#{beanJoursEncadrement.listeFonction}" />
						</h:selectOneMenu>


						<h:commandButton value="Rechercher" type="submit"
							action="#{beanJoursEncadrement.chargementTableResultatPersonel}">
							<f:ajax execute="selectDate selectEcole selectFonction"
								render="tableCalcul" />
						</h:commandButton>
					</h:panelGrid>



			</fieldset>

			<fieldset id="fieldSetResultat">

				<legend>
					<b>Résultats</b>
				</legend>

				
					<div class="datagrid">
					
						<h:dataTable id="tableCalcul"
							value="#{beanJoursEncadrement.listeResultat}" var="o"
							styleClass="order-table" headerClass="order-table-header"
							rowClasses="order-table-odd-row,order-table-even-row"
							>

							<h:column>
								<f:facet name="header">Date</f:facet>#{o.dateEncadrement}
    		</h:column>
							<h:column>
								<f:facet name="header">Ecole</f:facet>#{o.ecole}
    		</h:column>
							<h:column>
								<f:facet name="header">Fonction</f:facet>#{o.foncti}
    		</h:column>
							<h:column>
								<f:facet name="header">Activite</f:facet>#{o.activite}
    		</h:column>
							<h:column>
								<f:facet name="header">Nom</f:facet>

								<h:commandLink actionListener="#{beanJoursEncadrement.action}"
									value="#{o.nom}">
									<f:attribute name="detailEncadrant" value="#{o.idEncadrement}" />
								</h:commandLink>
							</h:column>
							<h:column>
								<f:facet name="header">Prenom</f:facet>#{o.prenom}
							
							
    		</h:column>
						</h:dataTable>

					</div>
					
					
			</fieldset>




			<fieldset id="fieldSetCoordonnées"
				style="margin-left: 10px; margin-right: 10px;">
				<legend>
					<b>Coordonnées du Personnel</b>
				</legend>


				<div class="datagrid">
			
					<h:dataTable id="tableDetail" value="#{beanJoursEncadrement.listeDetail}" var="encadrant">
						<h:column>
							<f:facet name="header">Nom</f:facet>#{encadrant.nomEncadrant}
						</h:column>
						<h:column>
							<f:facet name="header">Prénom</f:facet>#{encadrant.prenomEncadrant}
						</h:column>

						<h:column>
							<f:facet name="header">Fonction</f:facet>#{encadrant.fonctionEncadrant}
						</h:column>

						<h:column>
							<f:facet name="header">Téléphone</f:facet>#{encadrant.telEncadrant}
						</h:column>

						<h:column>
							<f:facet name="header">Adresse</f:facet>#{encadrant.adresseEncadrant}
						</h:column>

						<h:column>
							<f:facet name="header">Mail</f:facet>#{encadrant.emailEncadrant}
						</h:column>

					</h:dataTable>
					
				</div>


			</fieldset>
		</div>
</h:form>		
	</div>

</body>
</html>